<template>
	<el-card shadow="hover">
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="1.5">
				<el-button @click="onAddAppVersion" type="primary" plain icon="el-icon-plus">添加版本</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="适用渠道" align="center" prop="channel" />
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button @click="onEdiAppVersion(row)" type="text">修改</el-button>
					<el-button @click="onDeleteAppVersion(row)" type="text" style="color: #f56c6c">删除</el-button>
					<el-button @click="onViewAppVersion(row)" type="text">查看历史版本</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<app-version-add-dialog ref="appVersionAddRef" />
		<app-version-edit-dialog ref="appVersionEditRef" />
		<app-version-view-dialog ref="appVersionViewRef" />
	</el-card>
</template>

<script lang="ts">
import { reactive, ref, toRefs, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { versionUpdateList1, versionUpdateDelete1 } from '/@/api/admin/index';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import AppVersionAddDialog from './dialog/AppVersionAddDialog.vue';
import AppVersionEditDialog from './dialog/AppVersionEditDialog.vue';
import AppVersionViewDialog from './dialog/AppVersionViewDialog.vue';
export default {
	name: 'systemAppVersion',
	components: { AppVersionAddDialog, AppVersionEditDialog,AppVersionViewDialog },
	setup() {
		const appVersionAddRef = ref(null);
		const appVersionEditRef = ref(null);
		const appVersionViewRef = ref(null);
		const state = reactive({
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});
		//生命周期
		onMounted(() => {
			getList();
		});
		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 添加APP版本
		const onAddAppVersion = () => {
			(appVersionAddRef.value as any)?.openDialog({}, () => getList());
		};
		//修改APP版本
		const onEdiAppVersion = (row: any) => {
			(appVersionEditRef.value as any)?.openDialog(row, () => getList());
		};
		//删除APP版本
		const onDeleteAppVersion = (row: any) => {
			ElMessageBox.confirm(`您确定要删除${row.channel}渠道的APP版本？`, '确认消息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					_versionUpdateDelete1({ version_id: row.id });
				})
				.catch(() => {});
		};
		// 查看APP版本
		const onViewAppVersion = (row:any) => {
			(appVersionViewRef.value as any)?.openDialog(row);
		}

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_versionUpdateList1(state.queryParams);
		};
		// 录入时间字典
		const formatTime = (row: any) => {
			return timeDictionary(row.update_time);
		};

		/***********************网络请求************************/
		// APP版本列表
		const _versionUpdateList1 = (params: any) => {
			versionUpdateList1(params)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.loading = false;
				})
				.catch(() => state.loading = false);
		};
		// APP版本删除
		const _versionUpdateDelete1 = (params: any) => {
			versionUpdateDelete1(params)
				.then((res: any) => {
					console.log(res);
					ElMessage.success('操作成功');
					getList();
				})
				.catch((err) => {
					console.log(err);
				});
		};
		return {
			appVersionAddRef,
			appVersionEditRef,
			appVersionViewRef,
			onQuery,
			onAddAppVersion,
			onEdiAppVersion,
			onDeleteAppVersion,
			onViewAppVersion,
			getList,
			formatTime,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
